<template>
  <div class="map" id="map"></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { Draw } from "ol/interaction";
import { Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import TileArcGISRest from "ol/source/TileArcGISRest";

import CONSTANT from "@/config/constant.js";

export default {

  name: "drawCircle",

  data() {
    return {
      map: null,
      drawVector: null
    };
  },

  methods: {
    init() {
      // 绘制图层
      this.drawVector = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)"
          }),
          stroke: new Stroke({
            color: "#ffcc33",
            width: 2
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "#ffcc33"
            })
          })
        })
      });

      //实例化地图
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new TileArcGISRest({
              url: CONSTANT.GIS_URL
            })
          }),
          this.drawVector
        ],
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });

      this.map.addInteraction(
        new Draw({
          source: this.drawVector.getSource(),
          type: "Circle"
        })
      );
    }
  },

  mounted() {
    this.init();
  }
};
</script>

<style lang="less" scoped>
.map {
  height: 100%;
}
</style>